<script setup>
import {ref} from "vue";

const value1 = ref(true);
const value2 = ref(true);
const isAdmin = ref(false);
const isShow = ref(true);
const num = ref(0)
const str = ref('是')
</script>

<template>
<h1>开关组件</h1>
  <el-switch v-model="value1" />
  <el-switch
      v-model="value2"
      class="ml-2"
      style="--el-switch-on-color: #0aa1ed; --el-switch-off-color: #ff4949"
  />
  是否为管理员 <el-switch v-model="isAdmin"/>
  是否显示图片 <el-switch v-model="isShow"/>
  <hr>
  <img src="ff16.jpg" width="500" v-if="isShow">
  <hr>
  <!-- :active-value="开关打开的值" :inactive-value="开关关闭的值" 支持number与string -->
  <el-switch :active-value=1 :inactive-value=0 v-model="num"></el-switch>
  <el-switch :active-value="'是'" :inactive-value="'否'" v-model="str"/>
</template>

<style scoped>

</style>